/* 成绩录入页面思路分析
1.页面一加载,发送ajax请求学员信息列表
2.点击分数td,给当前td动态添加一个input输入框
    * (1)td标签是动态新增的元素,需要注册委托事件
    * (2)学员id和姓名不能修改，只有分数才可以修改
    * (3)输入框默认显示当前点击的td的文本
3.输入框按enter键 : (1)获取输入框文本 (2)发送ajax请求  (3)移除输入框
*/


/* 1.页面一加载,发送ajax请求学员信息列表 */
const initData = () => {
    axios({
        url: '/score/list',
        method: 'get'
    }).then(res => {
        //这个接口服务器返回的不是数组，而是对象。 
        console.log(res)
        let data = res.data.data
        console.log(data)

        document.querySelector('tbody').innerHTML = Object.keys(data).map(item => `<tr>
        <th scope="row">${item}</th>
        <td>${data[item].name}</td>
        <td class="score" data-id="${item}" data-batch="1">${data[item].score[0]}</td>
        <td class="score" data-id="${item}" data-batch="2">${data[item].score[1]}</td>
        <td class="score" data-id="${item}" data-batch="3">${data[item].score[2]}</td>
        <td class="score" data-id="${item}" data-batch="4">${data[item].score[3]}</td>
        <td class="score" data-id="${item}" data-batch="5">${data[item].score[4]}</td>
        </tr>`).join('')
    })
}

//调用函数
initData()

/* 2.点击分数td,给当前td动态添加一个input输入框 */
document.querySelector('tbody').addEventListener('click', function (e) {
    //2.0 判断点击的是不是分数td
    if (!e.target.classList.contains('score')) {
        return
    }

    //2.1 动态添加input标签
    //(1)动态创建input标签
    let input = document.createElement('input')
    //(2)设置文本 + 类名
    input.value = e.target.innerText
    input.classList.add('inp')
    //(3)添加到父元素
    e.target.appendChild(input)
    //体验优化： 输入框自动选中, 这样用户就可以直接修改了
    input.select()

    //3 输入框enter键 ： 发送ajax请求更改分数
    /* 细节：一定要键盘事件外面先存储td, 因为在键盘事件里面,  e 指向键盘事件对象 */
    let td = e.target
    input.addEventListener('keyup', function (e) {
        if (e.key == 'Enter') {
            //(1)获取参数
            let stu_id = td.dataset.id//学生id
            let batch = td.dataset.batch//第几次成绩
            let score = input.value//当前分数
            axios({
                url: '/score/entry',
                method: 'post',
                data: { stu_id, batch, score }
            }).then(res => {
                console.log(td)
                console.log(res)
                if (res.data.code == 0) {
                    Toast.success(res.data.message)
                    //刷新列表
                    initData()
                }
            }).catch(err => {
                Toast.fail('score必须,范围0~100')
            })
        }
    })

})


